<template>
  <div class="search-div">
    <!-- 搜索表单 -->
    <el-form label-width="70px" size="small">
      <el-form-item label="规格名称">
        <el-input
          v-model.trim="searchSpecName"
          style="width: 15%"
          placeholder="规格名称"
        ></el-input>
      </el-form-item>
      <el-row style="display:flex">
        <el-button type="primary" size="small" @click="handleClick">
          搜索
        </el-button>
        <el-button size="small" @click="handleClickReset">重置</el-button>
      </el-row>
    </el-form>
  </div>
  <div class="tools-div">
    <el-button type="success" size="small" @click="addShow">添 加</el-button>
  </div>

  <el-table :data="list" style="width: 100%">
    <el-table-column prop="specName" label="规格名称" class="div-specName"  width="200px" />
    <el-table-column label="规格值" #default="scope" width="700%">
      <div
        v-for="(item1, index1) in scope.row.specValue"
        :key="index1"
        style="padding: 5px; margin: 0;width: 100%;"
      >
        {{ item1.key }}：
        <el-tag
          v-for="(item2, index2) in item1.valueList"
          :key="index2"
          :type="warning"
          effect="plain"
          class="div-atrr"
          color="white "
          round
        >
          {{ item2 }}
        </el-tag>
      </div>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" align="center" width="200" #default="scope">
      <el-button type="primary" size="small" @click="editShow(scope.row)">
        修改
      </el-button>
      <el-button type="danger" size="small" @click="remove(scope.row.id)">
        删除
      </el-button>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.limit"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <el-dialog
    v-model="dialogVisible"
    title="添加或修改"
    width="40%"
    @close="resetProductSpec"
  >
    <el-form label-width="120px">
      <el-form-item label="规格名称">
        <el-input v-model="productSpec.specName" />
      </el-form-item>
      <el-form-item>
        <el-button size="default" type="success" @click="addSpec">
          添加新规格
        </el-button>
      </el-form-item>
      <el-form-item
        label=""
        v-for="(item, index) in productSpec.specValue"
        :key="index"
      >
        <el-row>
          <el-col :span="10">
            <el-input
              v-model="item.key"
              placeholder="规格"
              style="width: 90%;"
            />
          </el-col>
          <el-col :span="10">
            <el-input
              v-model="item.valueList"
              placeholder="规格值(如:白色,红色)"
              style="width: 90%;"
            />
          </el-col>
          <el-col :span="4">
            <el-button size="default" type="danger" @click="delSpec(index)">
              删除
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item align="right">
        <el-button type="primary" @click="saveOrUpdate">提交</el-button>
        <el-button @click="cancelEdit">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  GetProductSpecPageList,
  SaveProductSpec,
  UpdateProductSpecById,
  DeleteProductSpecById,
  getProductSpecInfoByName,
  getProductSpecInfoById,
} from '@/api/product/productSpec.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { cloneDeep } from 'lodash'
import { debounce } from '@/utils'

// 数据列表
const list = ref([])

// 分页条数据模型
const total = ref(0)

//分页条数据模型
const pageParamsForm = {
  page: 1, // 页码
  limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm)

// 定义数据模型
const dialogVisible = ref(false)
//定义根据名称搜索
const searchSpecName = ref('')

// 添加表单数据模型
const defaultForm = {
  id: '',
  specName: '',
  specValue: [],
}
const productSpec = ref(defaultForm)

//进入修改
const editShow = row => {
  const deepCopy = cloneDeep(row)
  productSpec.value = deepCopy
  dialogVisible.value = true
}

//进入添加
const addShow = () => {
  dialogVisible.value = true
  productSpec.value = {
    id: '',
    specName: '',
    specValue: [],
  }
}
//重置搜索内容
const resetData = () => {
  searchSpecName.value = ''
  fetchData()
}


// 重置规格表单
const resetProductSpec = () => {
  fetchData()
}

// 取消编辑时恢复到原始数据
const cancelEdit = () => {
  resetProductSpec()
  dialogVisible.value = false
}

// 页面添加规格操作
const addSpec = () => {
  productSpec.value.specValue.push({})
}

// 页面删除规格元素
const delSpec = index => {
  productSpec.value.specValue.splice(index, 1)
}

// 提交表单
const saveOrUpdate = async () => {
  if (!productSpec.value.id) {
    saveData()
  } else {
    updateData()
  }
}

//搜索防抖
const handleClick = debounce(value => {
  console.log(value);
  searchProductSpec.value = value
  searchProductSpec()
}, 500)

//重置防抖
const handleClickReset = debounce(value => {
    resetData()
}, 500)

// 保存修改
const updateData = async () => {
  // 需要将productSpec.value.specValue转换成json字符串提交到后端，通过clone一个新的对象进行实现
  const productSpecClone = JSON.parse(JSON.stringify(productSpec.value))

  // 将productSpecClone.specValue.valueList转换成数组，因为后端需要的数组格式的数据[{"key":"内存","valueList":["8G","18G","32G"]}]
  // v-model绑定的数据模型为字符串
  productSpecClone.specValue.forEach(item => {
    console.log(typeof item.valueList)
    if (typeof item.valueList === 'string') {
      // 针对规格数据修改完毕以后数据类型有可能会变成string，针对string类型的数据将其转换成数组
      item.valueList = item.valueList
        .split(',')
        .filter(value => value.trim() !== '')
    }
  })
  productSpecClone.specValue = JSON.stringify(productSpecClone.specValue)

  // 提交表单
  await UpdateProductSpecById(productSpecClone)

  dialogVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

// 保存数据
const saveData = async () => {
  // 需要将productSpec.value.specValue转换成json字符串提交到后端，通过clone一个新的对象进行实现
  const productSpecClone = JSON.parse(JSON.stringify(productSpec.value))

  // 将productSpecClone.specValue.valueList转换成数组，因为后端需要的数组格式的数据[{"key":"内存","valueList":["8G","18G","32G"]}]
  // v-model绑定的数据模型为字符串
  productSpecClone.specValue.forEach(item => {
    item.valueList = item.valueList
      .split(',')
      .filter(value => value.trim() !== '')
  })
  productSpecClone.specValue = JSON.stringify(productSpecClone.specValue)

  console.log(productSpecClone)

  // 提交表单
  await SaveProductSpec(productSpecClone)

  dialogVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

//删除
const remove = async id => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await DeleteProductSpecById(id)
      ElMessage.success('删除成功')
      fetchData()
    })
    .catch(() => {
      ElMessage.info('取消删除')
    })
}



const searchProductSpec = async () => {
  try {
    const response = await getProductSpecInfoByName(searchSpecName.value)
    const data = response.data || { records: [], total: 0 }
    const listData = data.records || []

    listData.forEach(item => {
      item.specValue = JSON.parse(item.specValue) // 将规格字符串转换成规格js对象
    })

    list.value = listData
    total.value = data.total
  } catch (error) {
    console.error('Failed to fetch data:', error)
  }
}

// 钩子函数
onMounted(() => {
  fetchData()
})

//页面变化
const handleSizeChange = size => {
  pageParams.value.limit = size
  fetchData()
}
const handleCurrentChange = number => {
  pageParams.value.page = number
  fetchData()
}

// 分页查询
const fetchData = async () => {
  try {
    let response
    if (searchSpecName.value) {
      response = await getProductSpecInfoByName(searchSpecName.value)
    } else {

      console.log(pageParams.value.page)
      console.log(pageParams.value.limit)
      response = await GetProductSpecPageList(
        pageParams.value.page,
        pageParams.value.limit
      )

      console.log(response)
    }

    const data = response.data || { records: [], total: 0 }
    const listData = data.records || []

    listData.forEach(item => {
      item.specValue = JSON.parse(item.specValue) // 将规格字符串转换成规格js对象
    })

    list.value = listData
    total.value = data.total
  } catch (error) {
    console.error('Failed to fetch data:', error)
  }
}
</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.div-atrr {
  padding: 5px 10px;
  margin: 0 10px;
  background-color: powderblue;
  border-radius: 10px;
  font-weight: bold;
}

.search-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}



</style>
